<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                width: 100vw;
                height: 100px;
                background: red;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .main{
                width: 100vw;
                height: 100vh;
                display: flex;
                justify-content: space-between;
            }
            .sider{
                width: 200px;
                height: 100%;
                background: greenyellow;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .content{
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="nav">顶部导航栏</div>
            <div class="main">
                <div class="sider">侧边栏</div>
                <div class="content">
                    {{block "content" .}}{{end}}
                </div>
            </div>
        </div>
    </body>
</html>